<template>
  <div class="introduceContainer">
    <el-image
      src="http://file.chat.navrise.com/file/demo/usBanner1.png"
      fit="cover"
      style="height: 33.33rem"
    >
    </el-image>
    <div class="introduceContent">
      <div class="contentText">
        <h3>XUHANG.</h3>
        <p>杭州旭航是一家全球领先的区域新媒体综合服务商。</p>
        <p>杭州旭航成立于2014年9月，与新浪、腾讯、百度、网易、搜狐等各大门户均已形成战略合作伙伴关系，并成功布局微信、微博等社交平台，拥有160,000+家国内主流网络论坛的海量渠道资源和超过百人的专业内容制作团队。杭州旭航以其资深的跨界品牌营销经验与敏锐的市场洞察力，参与众多知名公司的商业策略，并成功服务500强客户，提供大量意见领袖和品牌资源以实现数字化精准营销。</p>
      </div>
      <div class="contentText">
        <h4>携手赛伯乐百城众创</h4>
        <p>"2019年杭州旭航与赛伯乐集团战略合作，将业务进一步升级，把数字营销服务从城市新媒体转向区域新媒体，开展“繁星计划”。“繁星计划”主要借助赛伯乐百城众创的资源，与各区域政府和广电、报业等主流媒体对接，以总部+基地+平台的模型来运营区域新媒体的数字营销，聚焦服务区域产业与服务业。</p>
        <p>通过杭州旭航积累的海量用户大数据平台为支撑，打造区域新媒体服务，将各区域产业互联，数据复用，一方面通过海量用户的数据分析，为地方政府提供新媒体服务，以城市新媒体打造城市文化、旅游、体育等新IP；另一方面通过大数据数字营销的分析，通过大数据平台实现跨区域的区域细分产业的数字营销服务，如大健康、教育等等。通过跨区域的数字营销打造C2M模式，将生产者和消费者直接对接，按照顾客的需求，产品模型个性化定制，快速形成满足顾客的个性化需求的定制产品。</p>
        <p>在区域新媒体的数字营销方面，杭州旭航还利用新一代物联网、人工智能、大数据技术，将线上营销数据与线下实体门店打通，帮助实体商业门店打造互动体验+产品导购+自助结算+多媒体管理+数据分析一体化的智慧门店。</p>
        <p>“繁星计划”除了在国内的城市落地以外，杭州旭航在海外市场上也已开始布局。随着东南亚4G网络和TikTok等新媒体的广泛普及和应用，杭州旭航已经把区域新媒体的电商营销服务在印尼全面展开，未来准备与赛伯乐一起，在印尼区的阶段性成果上，继续在国际上开拓新的创新商业模式。"</p>
      </div>
      <div class="contentText">
        <h4>自信来源于优势资源</h4>
        <p>经过我们不懈的努力，我们拥有并且整合了很多优势资源，提供高效的营销解决方案。</p>
      </div>
      <div class="contentImage">
        <div class="imageText">
          <div v-for="item in dataOne" class="imageTextContent">
            <el-image
              :src="item.img"
            ></el-image>
            <h5>{{item.title}}</h5>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div class="imageText">
          <div v-for="item in dataTwo" class="imageTextContent">
            <el-image
              :src="item.img"
            ></el-image>
            <h5>{{item.title}}</h5>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
      <div class="contentText">
        <h4>技术合作伙伴</h4>
      </div>
      <div class="imageBlock">
        <div
          v-for="(item,index) in dataThere"
          class="everyImageBlock"
          :class="index <= 2?bigBlock:smallBlock"
        >
          <el-image
            :src="item"
            fit="scale-down"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import introduceBannerUrl from '@/assets/img/aboutUs/usBanner1.png'
  import icon1Url from '@/assets/img/aboutUs/icon1.png'
  import icon2Url from '@/assets/img/aboutUs/icon2.png'
  import icon3Url from '@/assets/img/aboutUs/icon3.png'
  import icon4Url from '@/assets/img/aboutUs/icon4.png'
  import icon5Url from '@/assets/img/aboutUs/icon5.png'
  import icon6Url from '@/assets/img/aboutUs/icon6.png'
  import cooperationUrl1 from '@/assets/img/aboutUs/cooperation1.png'
  import cooperationUrl2 from '@/assets/img/aboutUs/cooperation2.png'
  import cooperationUrl3 from '@/assets/img/aboutUs/cooperation3.png'
  import cooperationUrl4 from '@/assets/img/aboutUs/cooperation4.png'
  import cooperationUrl5 from '@/assets/img/aboutUs/cooperation5.png'
  import cooperationUrl6 from '@/assets/img/aboutUs/cooperation6.png'
  import cooperationUrl7 from '@/assets/img/aboutUs/cooperation7.png'
  export default {
    name: "introduce",
    data(){
      return{
        // introduceBannerUrl:introduceBannerUrl,
        dataOne:[
          {
            img:icon1Url,title:'客户运营',content:'以资深的跨界品牌营销经验与敏锐的市场洞察力参与众多知名公司的商业策略，并成功服务500强客户，实现每年快速增长50+名全职活动管理及执行人员多次组织规模超过百人的大型公关活动'
          },
          {
            img:icon2Url,title:'海外资源',content:'拥有Google、Facebook、Twitter等新媒体平台、华尔街日报、纽约时报、朝日新闻、世界报等各国顶级媒体资源；为中国客户的海外传播提供大量媒介执行和媒介资源与JNE达成线上线下资源全面合作'
          },
          {
            img:icon3Url,title:'数字互动',content:'与新浪、腾讯、百度、网易、搜狐等各大门户均已形成战略合作伙伴关系成功布局微信平台，能够提供大量意见领袖和品牌资源以实现点对点精准营销160,000+家国内主流网络论坛渠道资源'
          }
        ],
        dataTwo:[
          {
            img:icon4Url,title:'媒体资源',content:'3,000+家跨媒体营销渠道资源500+家高端核心媒体渠道资源100+人的专业媒介运营团队'
          },
          {
            img:icon5Url,title:'文娱资源',content:'拥有全国各级电视、视频媒体、明星资源从市场调研、产品设计、选题策划到方案整合、资源导入、媒体执行、效果评估形成完整的品牌娱乐营销体系，拥有100+位明星、红人、意见领袖、行业专家等自媒体资源'
          },
          {
            img:icon6Url,title:'技术支撑',content:'以大数据、人工智能平台支撑用户洞察、策略制定、创意生成、智能投放、效果分析的全过程平台由清华大学数据科学研究院、红杉树信息共同搭建'
          }
        ],
        dataThere: [cooperationUrl1,cooperationUrl2,cooperationUrl3,cooperationUrl4,cooperationUrl5,cooperationUrl6,cooperationUrl7],
        bigBlock:'bigBlock',
        smallBlock:'smallBlock',
      }
    }
  }
</script>

<style scoped lang="scss">
.introduceContainer{
  width: 100%;
  .el-image{
    width: 100%;
  }
  .introduceContent{
    width: 78.66rem;
    margin: 6.66rem auto 5.41rem;
    .contentText{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      h3{
        font-size: 4rem;
        /*font-family: 'fontHeavy';*/
        font-weight: 700;
        letter-spacing: .5px;
        color: #333333;
        margin: 0 0 4.16rem;
      }
      h4{
        font-size: 3rem;
        font-weight: 400;
        letter-spacing: .5px;
        color: #333333;
        margin: 4.833rem 0 4rem;
      }
      p{
        font-size: 1.33rem;
        /*font-family: 'fontNormal';*/
        /*font-weight: 300;*/
        color: #777777;
        text-align: left;
        line-height: 2rem;
        letter-spacing: .5px;
        margin: 0 0 2rem;
      }
      p:last-child{
        margin: 0;
      }
    }
    .contentImage{
      width: 100%;
      margin-top: 4.16rem;
      .imageText{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.66rem;
      }
      .imageTextContent{
        width: 25rem;
        height: 33.33rem;
        border: 1px solid #dddddd;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .el-image{
          width: 8.33rem;
          height: 8.33rem;
          margin-top: 3.75rem;
        }
        h5{
          font-size: 2rem;
          font-weight: 400;
          line-height: 2rem;
          letter-spacing: .5px;
          margin:2rem 0;
          color: #555555;
        }
        p{
          margin: 0;
          padding: 0 1.66rem;
          font-size: 1.25rem;
          /*font-family: 'fontNormal';*/
          /*font-weight: 300;*/
          line-height: 2rem;
          color: #777777;
          text-align: left;
        }
      }
    }
    .imageBlock{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .everyImageBlock{
        height: 16.66rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #dddddd;
      }
      .bigBlock{
        width: 25rem;
      }
      .smallBlock{
        width: 18.33rem;
        margin-top: 2rem;
      }
    }
  }
}
</style>
